<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>News Feed Dashboard</title>
<style>
	body {
		background: url(http://subtlepatterns.com/patterns/scribble_light.png) ;
	}
	
	#wrapper {
		width: 90%;
		max-width: 1100px;
		min-width: 300px;
		margin: 50px auto;
	}
	
	#columns {
		-webkit-column-count: 3;
		-webkit-column-gap: 10px;
		-webkit-column-fill: auto;
		-moz-column-count: 3;
		-moz-column-gap: 10px;
		-moz-column-fill: auto;
		column-count: 3;
		column-gap: 15px;
		column-fill: auto;
	}
	
	.pin {
		width: 80%;
		display: inline-block;
		background: #FEFEFE;
		border: 2px solid #FAFAFA;
		box-shadow: 0 1px 2px rgba(34, 25, 25, 0.4);
		margin: 0 2px 15px;
		-webkit-column-break-inside: avoid;
		-moz-column-break-inside: avoid;
		column-break-inside: avoid;
		padding: 15px;
		padding-bottom: 5px;
		background: -webkit-linear-gradient(45deg, #FFF, #F9F9F9);
		opacity: 0.8;

	}
	
	.pin img {
		width: 100%;
		border-bottom: 1px solid #ccc;
		padding-bottom: 15px;
		margin-bottom: 5px;
	}
	
	.pin p {
		font: 12px/18px Arial, sans-serif;
		color: #333;
		margin: 0;
	}
	
	@media (min-width: 320px) {
		#columns {
			-webkit-column-count: 1;
			-moz-column-count: 1;
			column-count: 1;
		}
	}
	
	@media (min-width: 480px) {
		#columns {
			-webkit-column-count: 2;
			-moz-column-count: 2;
			column-count: 2;
		}
	}
	
	@media (min-width: 640px) {
		#columns {
			-webkit-column-count: 3;
			-moz-column-count: 3;
			column-count: 3;
		}
	}
	
	@media (min-width: 960px) {
		#columns {
			-webkit-column-count: 4;
			-moz-column-count: 4;
			column-count: 4;
		}
	}
	
	@media (min-width: 1100px) {
		#columns {
			-webkit-column-count: 5;
			-moz-column-count: 5;
			column-count: 5;
		}
	}
	
	.pin:hover {
		opacity: 1;
	}
	
</style>
<script type='text/javascript' src='http://code.jquery.com/jquery-1.9.1.js'></script>
<script type="text/javascript" src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>

</head>
<body>

	<div style="background-color:#6393A7;padding:10px;">
		<input type="text" value="20" id="feedcount">
		<input type="button" value="Display" id="display">
	</div>
	

<div id="wrapper">
	<div id="columns"></div>
</div>	

	<script type="text/javascript">
		$(document).ready(function() {
			$("#display").click(loadFeeds);
			loadFeeds();
		});
		
		function loadFeeds() {
			var feedcount = $("#feedcount").val();
			var htmlContent = [];
			for (var i = 0; i < feedcount; i++) {
				htmlContent[htmlContent.length] = "<div id='feed"+i+"' class='pin'><b>Feed "+(i+1)+"</b><br>"+generateContent()+"</div>";	
			}
			$("#columns").html(htmlContent.join(""));
		}
		
		function generateContent() {
			var content = "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed vel diam mattis, ornare justo ac, accumsan orci. Nunc ut quam tempor, bibendum libero quis, adipiscing nulla. Suspendisse potenti. Donec sit amet sagittis risus. Interdum et malesuada fames ac ante ipsum primis in faucibus. Quisque vitae semper dui. Etiam vel urna augue. Integer pulvinar dictum molestie. Etiam arcu libero, pellentesque id fermentum vitae, sollicitudin et lacus. Aliquam quis consectetur dui. Etiam semper ornare dictum.. Mauris non dictum quam, sit amet consequat sapien. Mauris facilisis accumsan lectus, vitae ornare urna placerat ac. Fusce sed turpis a mauris congue cursus vel et erat.";
			
			var length = content.length;
			var indx = Math.floor(Math.random()*content.length);
			return content.substring(0, indx);
		}
	</script>
	
</body>
</html>